import { UploadOutlined } from '@ant-design/icons';
import {
  ModalForm,
  ProForm,
  ProFormRadio,
  ProFormSelect,
  ProFormText,
} from '@ant-design/pro-components';
import { useRequest } from '@umijs/max';
import { Button, message, Upload } from 'antd';
import React from 'react';
import { DeviceModel } from '../data';
import { createDevice } from '../service';

export type EditFormProps = {
  trigger?: JSX.Element;
  onOk?: () => void;
  values?: Partial<DeviceModel.deviceResponse>;
};

const EditForm: React.FC<EditFormProps> = ({ onOk, trigger }) => {
  const [messageApi, contextHolder] = message.useMessage();

  /* const intl = useIntl(); */

  const { run, loading } = useRequest(createDevice, {
    manual: true,
    onSuccess: () => {
      messageApi.success('Added successfully');
      onOk?.();
    },
    onError: () => {
      messageApi.error('Adding failed, please try again!');
    },
  });

  return (
    <>
      {contextHolder}
      <ModalForm
        title="新增"
        trigger={trigger}
        modalProps={{
          onCancel: () => console.log('Cancel'),
          okText: '保存',
          okButtonProps: { loading },
          centered:true
        }}
        onFinish={async (value: DeviceModel.deviceResponse) => {
          await run(value);
          return true;
        }}
        submitter={{
          render: (props) => {
            return [
              <Button key="cancel" onClick={() => props?.onReset?.()}>
                取消
              </Button>,
              <Button
                key="saveAndContinue"
                type="primary"
                onClick={() => run(props.form?.getFieldsValue())}
              >
                保存并继续
              </Button>,
              <Button key="save" type="primary" onClick={() => props.submit()}>
                保存
              </Button>,
            ];
          },
        }}
      >
        <ProFormText
          name="deviceId"
          label="工号"
          rules={[{ required: true, message: '请输入工号' }]}
          placeholder="请输入工号"
        />
        <ProFormText
          name="username"
          label="用户名"
          rules={[{ required: true, message: '请输入用户名' }]}
          placeholder="请输入用户名"
        />
        <ProFormText
          name="cardNumber"
          label="卡号"
          rules={[{ required: true, message: '请输入卡号' }]}
          placeholder="请输入卡号"
        />
        <ProForm.Item label="照片头像">
          <Upload>
            <Button icon={<UploadOutlined />}>上传</Button>
          </Upload>
        </ProForm.Item>
        <ProForm.Item label="人脸照片">
          <Upload>
            <Button icon={<UploadOutlined />}>上传</Button>
          </Upload>
        </ProForm.Item>
        <ProFormSelect
          name="department"
          label="部门"
          rules={[{ required: true, message: '请选择部门' }]}
          placeholder="请选择部门"
          options={[
            { label: '总部门', value: '总部门' },
            { label: '部门1', value: '部门1' },
            { label: '部门2', value: '部门2' },
          ]}
        />
        <ProFormSelect
          name="role"
          label="角色"
          rules={[{ required: true, message: '请选择角色' }]}
          placeholder="请选择角色"
          options={[
            { label: '正式员工', value: '正式员工' },
            { label: '临时员工', value: '临时员工' },
          ]}
        />
        <ProFormSelect
          name="deviceAccess"
          label="设备权限"
          placeholder="请选择设备权限"
          options={[
            { label: '普通用户', value: '普通用户' },
            { label: '管理员', value: '管理员' },
          ]}
        />
        <ProFormText name="devicePassword" label="设备密码" placeholder="请输入设备密码" />
        <ProFormRadio.Group
          name="gender"
          label="性别"
          rules={[{ required: true, message: '请选择性别' }]}
          options={[
            { label: '男', value: '男' },
            { label: '女', value: '女' },
          ]}
        />
      </ModalForm>
    </>
  );
};

export default EditForm;
